<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script>
        // 使用对象字面量创建一个对象，对象中有name，age，sex，weight，height
        // 最终在页面中的效果如下：
        var obj={
            name:"alice",
            age:20,
            sex:"女",
            weight:112,
            height:170
        };

        //方式一
        //创建p元素
        // var p1=document.createElement("p");
        // p1.innerHTML=obj.name;
        // var p2=document.createElement("p");
        // p2.innerHTML=obj.age;
        // var p3=document.createElement("p");
        // p3.innerHTML=obj.sex;
        // var p4=document.createElement("p");
        // p4.innerHTML=obj.weight;
        // var p5=document.createElement("p");
        // p5.innerHTML=obj.height;

        // var div=document.querySelector("div");
        // div.appendChild(p1);
        // div.appendChild(p2);
        // div.appendChild(p3);
        // div.appendChild(p4);
        // div.appendChild(p5);


        //方式二
        // var div=document.querySelector("div");
        // var arrs=["我的名字是"+obj.name,"我的年龄是"+obj.age,"我的性别是"+obj.sex,"我的体重是"+obj.weight,"我的身高是"+obj.height];
        // // 循环创建5个p元素
        // for(var i=0;i<5;i++){
        //     var p=document.createElement("p");
        //     p.innerHTML=arrs[i];
        //     div.appendChild(p);
        // }

        //方式三：

        var div=document.querySelector("div");
        div.innerHTML="<p>我的名字是"+obj.name+"</p>"+
                      "<p>我的名字是"+obj.age+"</p>"+
                      "<p>我的名字是"+obj.sex+"</p>"+
                      "<p>我的名字是"+obj.weight+"</p>"+
                      "<p>我的名字是"+obj.height+"</p>";
    </script>
</body>
</html>